<template>
    <div class="myCard" :style="customStyle">
        <div class="title">
            <div>
                <div class="arrow-icon"></div>
                {{ myTitle }}
            </div>
            <template v-if="showBtnGroup">
                <BtnGroup :btnGroup="btnGroup" :showDate="showDate" />
            </template>
        </div>
        <div class="content" :style="contentStyle">
            <slot></slot>
        </div>
    </div>
</template>
<script>
import BtnGroup from './btnGroup.vue'
export default {
    name: 'myCard',
    props: {
        myTitle: {
            type: String,
            default: ''
        },
        // myButtons: {
        //   type: [],
        //   default: [],
        // },
        className: {
            type: String,
            default: ''
        },
        showBtnGroup: {
            type: Boolean,
            default: false
        },
        height: {
            type: String,
            default: '160px'
        },
        customStyle: {
            type: Object,
            default: () => ({})
        },
        contentStyle: {
            type: Object,
            default: () => ({})
        },
        showDate: {
            type: Boolean,
            default: false
        }
    },
    components: {BtnGroup},
    data() {
        return {
            active: 'year',
            month: new Date(),
            btnGroup: [
                {
                    label: '按年统计',
                    id: 'year'
                },
                {
                    label: '按月统计',
                    id: 'month'
                },
                {
                    label: '按日统计',
                    id: 'day'
                }
            ]
        }
    },
    mounted() {},
    methods: {}
}
</script>
<styles scoped lang="scss">
.myCard {
    background-image: url('../../../../assets/images/index/largeScreen/rectangle.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    width: 100%;
    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        align-items: center;
        height: 40px;
        width: 100%;
        padding: 0 10px;
        background-image: url('../../../../assets/images/index/largeScreen/title.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #fff;
        padding-left: 20px;
        box-sizing: border-box;
        font-size: 16px;
        .arrow-icon {
            position: absolute;
            height: 9px;
            border-top: 5px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 10px solid #65feff;
            left: 2px;
            top: 12px;
        }
    }
    .content {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 10px;
    }
}
</styles>